<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 这是个母版页 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 把列表多余的东西去掉 */
        ol,ul {
            list-style-type: none;
        }

        /* 把所有的a标签默认效果去掉 */
        a {
            color: white;
            text-decoration: none;
        }
        body {
            background-color: #eeeeee;
        }

        #header {
            text-align: center;
        }

        #nav {
            background-color: #0370b6;
            height: 50px;
            ul {
                width: 60%;
                margin: 0 auto;
            }
            li {
                margin-top: 13px;
                text-align: center;
                width: 10%;
                float: left;
                a:hover {
                    background-color: #ff7a21;
                }
            }
            
            button {
                margin-top: 13px;
                margin-right: 10px;
                float: right;
                a{
                    color: black;
                }
            }
            
        }
    </style>
</head>

<body>
    <!--导航栏上面的部分-->
    <p id="header">
        <img src="imgs/head.png">
    </p>
    <!-- 导航栏部分 -->
    <div id="nav">
        <ul>
            <li><a href="home_page.html">首页</a></li>
            <li><a href="tourist_routes.html">旅游路线</a></li>
            <li><a href="tourist_attractions.html">旅游景点</a></li>
            <li><a href="#">餐饮住宿</a></li>
            <li><a href="#">旅游车票</a></li>
            <li><a href="#">旅游保险</a></li>
            <li><a href="#">旅游攻略</a></li>
            <li><a href="#">注意事项</a></li>
            <li><a href="member_center.html">会员中心</a></li>
        </ul>
        <button><a href="register.html">注册</a></button>
        <button><a href="user_login.html">登录</a></button>
    </div>
</body>

</html>